<template>
  <!-- 根元素 -->
  <div class="dashboard-container">
    <!-- 主题卡片 -->
    <el-card class="box-card">
      <!-- layout布局头部部分 -->
      <el-row>
        <!-- 靠左占位 -->
        <el-col :span="19">
          <!-- form表单 -->
          <el-form :inline="true" label-width="80px">
            <el-form-item >
              <el-input placeholder="根据用户名搜索" v-model="searchName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="searchNameClear">清空</el-button>
              <el-button type="primary" @click="searchByName">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 靠右占位 -->
        <el-col :span="5" class="rightBtn">
          <!-- 新增权限组 -->
          <el-button type="success" size="small" icon="el-icon-edit" @click="handleEdit('add')">新增权限组</el-button>
        </el-col>
      </el-row>
      <!-- 记录 -->
      <el-row class="formTitle">
        <i class="el-icon-info"></i>
        <span>共{{renderList.counts}}条记录</span>
      </el-row>

      <!-- 用户列表  -->
      <el-table
      :data="renderList.list"
      style="width: 100%"
      :row-style="{height:'56px'}"
      :header-cell-style="{background:'#fafafa'}"
      >
        <!-- 选择 -->
        <el-table-column
        type="selection"
        width="55">
        </el-table-column>
        <!-- 用户名 -->
        <el-table-column
        align='center'
          prop="title"
          label="用户名"
          >
        </el-table-column>
        <!-- 日期 -->
        <el-table-column
        align='center'
          prop="update_date"
          label="日期"
          >
        </el-table-column>
        <!-- 操作 -->
        <el-table-column
          align='center'
          prop="address"
          label="操作">
          <template slot-scope="{row}">
            <!-- 编辑 -->
            <el-button
            v-if="row.role!='admin'"
            class="el-icon-edit editbtn form_btn"
              @click="handleEdit('edit',row)"></el-button>
            <!-- 删除 -->
            <el-button
            v-if="row.role!='admin'"
              type="danger"
              class="el-icon-delete delbtn form_btn"
              @click="handleDelete(row)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="bottomTool">
        <PageTool :total='renderList.counts' :paginationPage='renderList.page' :paginationPagesize='renderList.pageSize' @pageChange='pageChange' @pageSizeChange='pageSizeChange'>
        </PageTool>
      </div>
    </el-card>
    <!-- 新增和修改对话框 -->
    <PerAdd :ruleInline='ruleInline' @handleCloseModal='handleCloseModal' @newDataes='newDataes' ref="dialog" text='' :pageTitle="changeType==='add'?'创建权限组':'编辑权限组'"></PerAdd>
  </div>
</template>

<script>
import PerAdd from '@/module-manage/components/permissions-add'
import PageTool from '@/module-manage/components/page-tool'
import { list, remove } from '@/api/base/permissions.js'
export default {
  data () {
    return {
      renderList: {},
      searchName: '',
      changeType: '',
      ruleInline: {
        title: [
          { required: true, message: '请选择用户名', trigger: 'blur' }
        ],
        permissions: [
          { required: true, message: '请选择权限', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    PageTool: PageTool,
    PerAdd: PerAdd
  },
  async created () {
    const { data } = await list({ page: 1, pagesize: 10, title: '' })
    this.renderList = data
  },

  methods: {
    // 清空搜索名
    async searchNameClear () {
      this.searchName = ''
    },
    // 用户名搜搜索
    async searchByName () {
      const { data } = await list({ page: 1, pagesize: this.renderList.pagesize, title: this.searchName })
      this.renderList = data
    },
    async pageChange (id) {
      this.renderList.page = id
      const { data } = await list({ page: this.renderList.page, pagesize: this.renderList.pagesize, title: this.searchName })
      this.renderList = data
    },
    async pageSizeChange (id) {
      this.renderList.pagesize = id
      const { data } = await list({ page: 1, pagesize: this.renderList.pagesize, title: this.searchName })
      this.renderList = data
    },
    // 新增和修改权限组
    async handleEdit (type, id) {
      this.changeType = type
      if (type === 'edit') {
        // 编辑详情数据加载
        this.$refs.dialog.hanldeEditForm(id.id)
      }
      // 添加弹层显示
      this.$refs.dialog.dialogFormV()
    },
    // 删除确认
    async handleDelete (id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: async (action, instance, done) => {
          if (action === 'confirm') {
            await remove({ id: id.id })
            const { data } = await list({ page: 1, pagesize: this.renderList.pagesize, username: this.searchName })
            this.renderList = data
            done()
          } else {
            done()
          }
        }
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async newDataes () {
      this.$refs.dialog.dialogFormH()
      this.$refs.dialog.handleResetForm()
      const { data } = await list({ page: 1, pagesize: this.renderList.pagesize, username: this.searchName })
      this.renderList = data
    },
    handleCloseModal () {
      this.$refs.dialog.dialogFormH()
      this.$refs.dialog.handleResetForm()
    }
  }
}
</script>

<style scoped lang='less'>
.box-card{
  margin: 20px;
  // padding: 20px;
  .rightBtn{
    display: flex;
    flex-direction: row-reverse;
  }
  .bottomTool{
    margin: 20px 0;
    float: right;
  }
}
.formTitle{
    background-color: #f4f4f5;
    color: #909399;
    height: 34px;
    line-height: 34px;
    padding-left: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    span{
      font-size: 15px;
      margin-left: 8px;
    }
}
.form_btn{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
}
.editbtn{
  background-color: #ecf5ff;
  color: #4ca2ff;
}
.delbtn{
  background-color: #fef0f0;
  color: #f57073;
}

</style>
